<template>
  <div class="capture-history">
    <!-- 时间范围选择 -->
    <div class="controls">
      <el-select v-model="timeRange" size="small" placeholder="选择时间范围">
        <el-option label="最近一周" value="7" />
        <el-option label="最近半月" value="15" />
        <el-option label="最近一月" value="30" />
      </el-select>

      <!-- 展示方式切换 -->
      <el-radio-group v-model="displayMode" size="small">
        <el-radio-button label="timeline">时间轴</el-radio-button>
        <el-radio-button label="table">表格</el-radio-button>
        <el-radio-button label="carousel">轮播</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 时间轴视图 -->
    <div v-if="displayMode === 'timeline'" class="timeline-view">
      <el-timeline>
        <el-timeline-item
          v-for="item in captureList"
          :key="item.id"
          :timestamp="item.time"
          placement="top"
        >
          <el-card>
            <img :src="item.url" class="timeline-image" @click="previewImage(item.url)" />
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 表格视图 -->
    <div v-else-if="displayMode === 'table'" class="table-view">
      <el-table :data="captureList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="time" label="抓拍时间" width="180" />
        <el-table-column label="预览图">
          <template #default="scope">
            <img :src="scope.row.url" class="table-image" @click="previewImage(scope.row.url)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="downloadImage(scope.row.url)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 轮播视图 -->
    <div v-else class="carousel-view">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in captureList" :key="item.id">
          <div class="carousel-item">
            <img :src="item.url" class="carousel-image" @click="previewImage(item.url)" />
            <div class="carousel-info">
              <span>{{ item.time }}</span>
              <el-button size="small" @click="downloadImage(item.url)">下载</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 图片预览 -->
    <el-dialog v-model="previewVisible" title="图片预览" width="50%">
      <img :src="previewUrl" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const timeRange = ref('7')
const displayMode = ref('timeline')
const previewVisible = ref(false)
const previewUrl = ref('')

// 更新抓拍记录列表
const captureList = ref([
  {
    id: 1,
    time: '2024-01-11 12:14:49',
    url: 'https://fastdfs-gateway.ys7.com/a575/1/capture/003qBc2azYn9q4NnKRYeHGDAHQi6fRj.jpg?Expires=1736506489&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=pxRwdZMMKbH72Myq8P4JNdVsTBs%3D'
  },
  {
    id: 2,
    time: '2024-01-11 12:15:04',
    url: 'https://fastdfs-gateway.ys7.com/b75a/1/capture/003qBc352udYCQq6Xb9OBvL6qkjQI17.jpg?Expires=1736506504&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=56n6ABNsx6O0n8jkm0HNm%2Bc2u7o%3D'
  },
  {
    id: 3,
    time: '2024-01-11 12:19:01',
    url: 'https://fastdfs-gateway.ys7.com/c844/1/capture/003qBcApUSw700liorSdSFLG4IBU1WD.jpg?Expires=1736506741&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=6N95siaOzrhO1ohvDQCQ1J11IvQ%3D'
  },
  {
    id: 4,
    time: '2024-01-11 12:19:46',
    url: 'https://fastdfs-gateway.ys7.com/8507/1/capture/003qBcCJVKy5KjLZC0OeGtgDnJY9Jqs.jpg?Expires=1736506786&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=INOPh%2FI8V8IcshuVufVgPuastT8%3D'
  },
  {
    id: 5,
    time: '2024-01-11 12:20:13',
    url: 'https://fastdfs-gateway.ys7.com/baab/1/capture/003qBcDCZTdMQOauYdPPafQbrnmlR3f.jpg?Expires=1736506813&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=uBOgBe6wknCo8FWm1Z1ueEyc9z4%3D'
  },
  {
    id: 6,
    time: '2024-01-11 17:01:27',
    url: 'https://fastdfs-gateway.ys7.com/8f53/1/capture/003qBlk49YUpTYCdDqdFZ4TshbQyVou.jpg?Expires=1736524887&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=ylSdj3GRn5gGWxbgPV5a%2Br0Uq48%3D'
  },
  {
    id: 7,
    time: '2024-01-11 17:05:30',
    url: 'https://fastdfs-gateway.ys7.com/7600/1/capture/003qBls1fd4Iq9jfDxiRqjpPJsRvzSq.jpg?Expires=1736525130&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=PYw0xpzD9ktKlERhXo9tn6GLyGk%3D'
  },
  {
    id: 8,
    time: '2024-01-11 17:06:10',
    url: 'https://fastdfs-gateway.ys7.com/659c/1/capture/003qBltJVZ8QKhsRNEnAG9x0qg933ij.jpg?Expires=1736525170&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=xSjdBtb%2B0K4Yb9YwA7GxfGVwOxg%3D'
  },
  {
    id: 9,
    time: '2024-01-11 17:07:03',
    url: 'https://fastdfs-gateway.ys7.com/3b98/1/capture/003qBlv2h129FyZ8qyGz6JLLP7ENWzV.jpg?Expires=1736525223&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=VKRs2l5Sx2DYIUHPvd%2Bw0kVA3Gc%3D'
  },
  {
    id: 10,
    time: '2024-01-12 01:43:12',
    url: 'https://fastdfs-gateway.ys7.com/73fd/1/capture/003qC2SZaWWCVd3EJnTBeRqbY2ybG6C.jpg?Expires=1736556592&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=HJ%2FiMouIHwtWSJFViuNEhdWPxGE%3D'
  },
  {
    id: 11,
    time: '2024-01-12 03:34:14',
    url: 'https://fastdfs-gateway.ys7.com/1440/1/capture/003qC5yLmrMeD35l51Jv84usCiToi78.jpg?Expires=1736563254&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=cSTjxLOtgNpLuaRuiuLYgSlY808%3D'
  },
  {
    id: 12,
    time: '2024-01-12 03:34:48',
    url: 'https://fastdfs-gateway.ys7.com/3e4c/1/capture/003qC5zTdxqvGWSwLQXifybZwGptMlG.jpg?Expires=1736563288&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=D%2FWbcV2vRiGWFoGInL1n%2FCcOHto%3D'
  },
  {
    id: 13,
    time: '2024-01-12 03:35:58',
    url: 'https://fastdfs-gateway.ys7.com/4751/1/capture/003qC61lk8Z2uaIPgkfzRZxCC3nRNxh.jpg?Expires=1736563358&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=FGGXe4qN4SiPYDy71L6wtZH6aZk%3D'
  },
  {
    id: 14,
    time: '2024-01-12 03:36:18',
    url: 'https://fastdfs-gateway.ys7.com/1b4f/1/capture/003qC62OpZVgygMvs3y1zcgtQyUMMYM.jpg?Expires=1736563378&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=5vPt1oNGK8Xu8M%2BXIBD0yOdXJHo%3D'
  },
  {
    id: 15,
    time: '2024-01-12 03:36:29',
    url: 'https://fastdfs-gateway.ys7.com/86a2/1/capture/003qC62mX6x4CWfUMKP0nGQJ1n69UDB.jpg?Expires=1736563389&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=DrheKCZiIX%2BsH6QUCDEcfK0yjrA%3D'
  },
  {
    id: 16,
    time: '2024-01-12 03:36:22',
    url: 'https://fastdfs-gateway.ys7.com/b927/1/capture/003qC62Y5eDJqgYguXETqYewGJUM2bv.jpg?Expires=1736563382&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=jS9Dr5E9CZUAWBy2Jrz7oKy1L9k%3D'
  },
  {
    id: 17,
    time: '2024-01-12 03:37:16',
    url: 'https://fastdfs-gateway.ys7.com/c4ca/1/capture/003qC64JiTCyhS5GEX9ZihtOA6VBFQq.jpg?Expires=1736563436&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=BuBNq3%2Blqg%2BmqAvnUK0yEgyOywY%3D'
  }
])

// 预览图片
const previewImage = (url: string) => {
  previewUrl.value = url
  previewVisible.value = true
}

// 下载图片
const downloadImage = async (url: string) => {
  try {
    const response = await fetch(url)
    const blob = await response.blob()
    const downloadUrl = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = downloadUrl
    a.download = `capture_${new Date().getTime()}.jpg`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(downloadUrl)
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败')
  }
}

// 添加新的抓拍记录
const addNewCapture = (url: string) => {
  const newCapture = {
    id: captureList.value.length + 1,
    time: new Date().toLocaleString(),
    url
  }
  captureList.value.unshift(newCapture)
}

defineExpose({
  addNewCapture
})
</script>

<style scoped lang="scss">
.capture-history {
  padding: 20px;

  .controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .timeline-image {
    width: 200px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
  }

  .table-image {
    width: 100px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
  }

  .carousel-item {
    position: relative;
    height: 100%;

    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .carousel-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px;
      background: rgba(0,0,0,0.6);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style> 